<template>
  <view class="order_page">
    <u-navbar
      title="确认订单"
      :autoBack="true"
      bgColor="#fff"
      height="88rpx"
      leftIconSize="34"
      placeholder
    ></u-navbar>
    <view class="container">
      <Card style="padding: 30rpx 20rpx">
        <view class="address_box">
          <view class="address_icon_view">
            <image
              style="height: 48rpx; width: 48rpx"
              src="@/static/icon/address.png"
              mode="aspectFill"
            />
          </view>
          <view class="address_info">
            <view class="address_all">
              北京市海淀区恒大新宏福苑西区20号楼2单
            </view>
            <text class="address_text">金金 15800000000</text>
          </view>
          <view class="address_arrow_view">
            <u-icon name="arrow-right" size="30"></u-icon>
          </view>
        </view>
      </Card>
      <Card style="padding: 30rpx 20rpx">
        <view class="goods_list">
          <Goods></Goods>
          <Goods></Goods>
          <Goods></Goods>
        </view>
      </Card>
      <Card style="padding: 30rpx 20rpx">
        <view class="pay_view">
          <text class="span">余额支付</text>
          <view class="pay_money">
            <Money style="--size: 28rpx">112,999</Money>
          </view>
          <Checkout checkout></Checkout>
        </view>
      </Card>
    </view>
    <view class="summation_view">
      <view class="summation_content">
        <text class="text">共2个, 合计: </text>
        <Money style="--size: 28rpx">76.3</Money>
      </view>
      <up-button
        class="submit_btn"
        :hairline="false"
        color="#eb5757"
        text="提交订单"
        shape="circle"
      ></up-button>
    </view>
  </view>
</template>

<script setup>
import Card from "@/component/Card.vue";
import Money from "@/component/Money.vue";
import Goods from "./Goods.vue";
import Checkout from "@/component/Checkout.vue";
import {} from "vue";
</script>

<style lang="scss" scoped>
.order_page {
  background-color: #f8f9fa;
  min-height: 100%;
  .container {
    padding: 20rpx 30rpx;
  }
  .summation_view {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 20rpx 30rpx;
    border-top: 1px solid #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .submit_btn {
      margin: 0;
      width: 178rpx;
    }
    .summation_content {
      display: flex;
      align-items: center;
      margin-right: 40rpx;
      align-content: center;
      line-height: 1;
      .text {
        color: #333333;
        font-weight: 400;
        font-size: 24rpx;
        color: #333333;
        line-height: 1;
        margin-right: 10rpx;
      }
    }
  }
  .pay_view {
    display: flex;
    align-items: center;
    .span {
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      line-height: 35rpx;
      margin-right: 40rpx;
    }
    .pay_money {
      margin-left: 0;
      margin-right: auto;
    }
  }

  .address_box {
    display: flex;
    align-items: stretch;
    .address_arrow_view {
      display: flex;
      align-items: center;
    }
    .address_info {
      flex: 1 0 0;
      margin-left: 20rpx;
      margin-right: 44rpx;
      .address_all {
        font-weight: 400;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        font-family: pfm;
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
        line-height: 44rpx;
      }
      .address_text {
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
</style>
